<template>
	<view class="header">
		<uni-row v-if="isLoginFlag">
			<uni-col :span="12" class="left">
				<image :src="loginUserInfo.avatar"></image>
			</uni-col>
			<uni-col :span="12" class="right">
				<view>
					<view class="first-title">
						<text>{{loginUserInfo.name}}</text>
					</view>
					<view class="second-title">
						<text>{{loginUserInfo.username}}</text>
					</view>


				</view>

			</uni-col>
		</uni-row>

		<uni-row v-else>
			<uni-col :span="12" class="left">
				<image style="width: 250px; height: 200px;"
					src="https://img1.baidu.com/it/u=3857804321,4118764897&fm=253&fmt=auto&app=138&f=JPEG?w=913&h=500">
				</image>
			</uni-col>
			<uni-col :span="12" class="right">
				<view>
					<view class="first-title">
						<text>未登录用户</text>
					</view>


				</view>

			</uni-col>
		</uni-row>





	</view>

	<view class="btn-area" v-if="isLoginFlag">
		<button class="btn" type="default" @click="doExit">退出登录</button>
	</view>
	<view class="btn-area" v-else>
		<button class="btn" type="default" @click="doGo">去登录</button>
	</view>


	<uni-popup ref="alertDialog" type="dialog">
		<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="警告" content="确定要退出吗 ？"
			@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
	</uni-popup>


	<uni-section title="你好" type="line" padding>
		<uni-grid :column="3"  @change="change">
			<uni-grid-item index="0" v-for="item   in   grids">
				<view class="grid-item-box">
					<uni-icons :type="item.icon" :size="40" color="#777" />
					<text class="text">{{item.title}}</text>
				</view>
			</uni-grid-item>
		<!-- 	<uni-grid-item index="1">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons type="star-filled" :size="40" color="#777" />
					<text class="text">我的收藏</text>
				</view>
			</uni-grid-item>
			<uni-grid-item index="2">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons type="location-filled" :size="40" color="#777" />
					<text class="text">我的位置</text>
				</view>
			</uni-grid-item>
			<uni-grid-item index="3">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons type="person" :size="40" color="#777" />
					<text class="text">个人资料</text>
				</view>
			</uni-grid-item>
			<uni-grid-item index="4">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons type="settings" :size="40" color="#777" />
					<text class="text">设置</text>
				</view>
			</uni-grid-item>
			<uni-grid-item index="5">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons type="mail-open-filled" :size="40" color="#777" />
					<text class="text">我的账单</text>
				</view>
			</uni-grid-item> -->
		</uni-grid>
	</uni-section>



</template>

<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app'




	import {
		onMounted,
		ref
	} from 'vue';

	//默认没有登录
	const isLoginFlag = ref(false)



	//判断是否登录
	const isLogin = () => {
		if (!uni.getStorageSync("loginUser")) {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		} else {
			isLoginFlag.value = true;

		}

	}
	//登录用户信息
	const loginUserInfo = ref({
		id: "",
		name: "",
		username: "",
		avatar: ""
	})


	//初始化个人信息
	const init = () => {
		const info = uni.getStorageSync("loginUser");
		if (info) {
			const object = JSON.parse(info)
			loginUserInfo.value.id = object.id;
			loginUserInfo.value.name = object.name;
			loginUserInfo.value.username = object.username;
			loginUserInfo.value.avatar = object.avatar;

		}


	}
	const alertDialog = ref()
	const doExit = () => {
		alertDialog.value.open()

	}



	const doGo = () => {
		uni.navigateTo({
			url: '/pages/login/login'
		})

	}


	const dialogConfirm = () => {

		uni.removeStorageSync("loginUser")
		uni.navigateTo({
			url: '/pages/login/login'
		})

	}


	onShow(() => {
		isLogin()

		init()
	})



	const change = (args) => {

		switch (args.detail.index) {
			case "0":
			uni.navigateTo({
				url: '/pages/orders/orders'
			})
				break;
			case "1":
				uni.navigateTo({
					url: '/pages/location/location'
				})
				break;
			case "2":
				uni.navigateTo({
					url: '/pages/location/location'
				})
				break;
			default:
				break;
		}

	}
	
	
	const   grids   =ref([
		{
		   title:"我的订单",
		   icon:"home",
		   index:0
		},
		{
		   title:"我的收藏",
		   icon:"star-filled"	,
		  index:1
			
		},
		{
		   title:"我的位置",
		   icon:"location-filled"	,
			index:2
			
		}
		
	])
	
	
	
	
	
	
</script>

<style scoped>
	.header {
		height: 350rpx;
		/* background-color: azure; */

	}

	.left {
		display: flex;
		justify-content: center;
		height: 350rpx;
		align-items: center;

	}

	.left image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100rpx;

	}

	.right {
		display: flex;
		justify-content: left;
		height: 350rpx;
		align-items: center;

	}


	.right .second-title {
		margin-top: 30rpx;
	}

	.right .first-title text {
		font-weight: bold;


	}

	.right .second-title text {
		font-size: 0.8rem;

	}

	.btn-area {
		height: 100rpx;
		width: 100%;
		position: relative;
		border-bottom: 1px solid beige;

	}

	.btn {
		width: 200rpx;
		font-size: 0.8rem;
		background-color: skyblue;
		color: white;
		height: 70rpx;
		position: absolute;
		right: 50rpx;
		top: 10rpx;

	}

	.grid-item-box {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;

	}
</style>